<template>
  <div v-if="loading" class="flex items-center justify-center w-full h-[50%]">
    <a-spin :spinning="loading" size="large" tip="加载中..." />
  </div>
  <div class="page-dashboard" v-else>
    <div class="page-dashboard-overview mt-[24px] flex flex-wrap justify-between">
      <div class="page-dashboard-overview-item p-[16px]">
        <div class="page-dashboard-overview-item-top whitespace-nowrap">
          <div class="text-[16px] text-[#262626]">站点概览</div>
          <div class="text-[16px] text-[#0083FF] cursor-pointer" @click="() => $router.push({ name: 'Site' })">
            管理
          </div>
        </div>
        <div class="page-dashboard-overview-item-column">
          <div class="w-[40%] px-[17px] column-border">
            <div class="text-[16px] text-[#595959] flex items-center">
              <span class="mr-[8px] whitespace-nowrap">站点数量</span>
              <a-tooltip placement="top" color="#fff">
                <template #title>
                  <span style="color: #595959"> 站点（内容库）总数量，包括启用和禁用 </span>
                </template>
                <info-circle-outlined class="text-[12px]" />
              </a-tooltip>
            </div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.site_info.total + '' || '-' }}
            </div>
          </div>
          <div class="w-[40%] px-[17px] column-border">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">启用中数量</div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.site_info.start + '' || '-' }}
            </div>
          </div>
          <div class="flex-1 px-[17px] column-border">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">禁用数量</div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.site_info.forbid + '' || '-' }}
            </div>
          </div>
        </div>
      </div>
      <div class="page-dashboard-overview-item p-[16px]">
        <div class="page-dashboard-overview-item-top whitespace-nowrap">
          <div class="text-[16px] text-[#262626]">广告库概览</div>
          <div class="text-[16px] text-[#0083FF] cursor-pointer" @click="() => $router.push({ name: 'AdBank' })">
            管理
          </div>
        </div>
        <div class="page-dashboard-overview-item-column">
          <div class="w-[40%] px-[17px] column-border">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">
              <span class="mr-[8px]">广告库数量</span>
              <a-tooltip placement="top" color="#fff">
                <template #title>
                  <span style="color: #595959"> 广告库总数量，包括启用和禁用 </span>
                </template>
                <info-circle-outlined class="text-[12px]" />
              </a-tooltip>
            </div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.adv_info.total + '' || '-' }}
            </div>
          </div>
          <div class="w-[40%] px-[17px] column-border">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">启用中数量</div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.adv_info.start + '' || '-' }}
            </div>
          </div>
          <div class="flex-1 px-[17px] column-border">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">禁用数量</div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.adv_info.forbid + '' || '-' }}
            </div>
          </div>
        </div>
      </div>
      <div class="page-dashboard-overview-item p-[16px]">
        <div class="page-dashboard-overview-item-top whitespace-nowrap">
          <div class="text-[16px] text-[#262626]">采集概览</div>
          <div class="text-[16px] text-[#0083FF] cursor-pointer" @click="() => $router.push({ name: 'CollectManage' })">
            管理
          </div>
        </div>
        <div class="page-dashboard-overview-item-column">
          <div class="w-[40%] px-[17px] column-border">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">
              <span class="mr-[8px] whitespace-nowrap">启用采集资源</span>
              <a-tooltip placement="top" color="#fff">
                <template #title>
                  <span style="color: #595959"> 启用中的采集资源数量 </span>
                </template>
                <info-circle-outlined class="text-[12px]" />
              </a-tooltip>
            </div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.collect_info.start_collect + '' || '-' }}
            </div>
          </div>
          <div class="flex-1 px-[17px] column-border">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">
              <span class="mr-[8px]">定时采集任务</span>
              <a-tooltip placement="top" color="#fff">
                <template #title>
                  <span style="color: #595959"> 启用中的定时采集任务数量 </span>
                </template>
                <info-circle-outlined class="text-[12px]" />
              </a-tooltip>
            </div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.collect_info.collect_cron + '' || '-' }}
            </div>
          </div>
        </div>
      </div>
      <div class="page-dashboard-overview-item p-[16px]">
        <div class="page-dashboard-overview-item-top whitespace-nowrap">
          <div class="text-[16px] text-[#262626]">系统配置</div>
          <div class="text-[16px] text-[#0083FF] cursor-pointer" @click="() => $router.push({ name: 'SystemManage' })">
            管理
          </div>
        </div>
        <div class="page-dashboard-overview-item-column">
          <div class="w-[40%] px-[17px] column-border">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">已配置项</div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.system_conf.configured + '' || '-' }}
            </div>
          </div>
          <div class="w-[40%] px-[17px] column-border">
            <div class="text-[16px] text-[#FE4C4D] whitespace-nowrap">未配置项</div>
            <div class="mt-[8px] text-[24px] text-[#FE4C4D] font-medium">
              {{ dashboardInfo.system_conf.not_configured + '' || '-' }}
            </div>
          </div>
          <!--
          <div class="flex-1 px-[17px]">
            <div class="text-[16px] text-[#595959] whitespace-nowrap">播放线路</div>
            <div class="mt-[8px] text-[24px] text-[#262626] font-medium">
              {{ dashboardInfo.not_configured + '' || '-' }}
            </div>
          </div>
        --></div>
      </div>
    </div>
    <div class="page-dashboard-system p-[16px] box-border">
      <div class="text-[16px] text-[#262626] mb-[24px]">系统信息</div>
      <div class="page-dashboard-system-table px-[16px]">
        <div class="page-dashboard-system-table-item bg-[#FAFAFA]">
          <div class="w-[50%] text-left">
            <span>{{ systemInfo[0] || '-' }}</span>
          </div>
          <div class="w-[50%] text-left">{{ systemInfo[1] || '-' }}</div>
        </div>
        <div class="page-dashboard-system-table-item">
          <div class="w-[50%]">{{ systemInfo[2] || '-' }}</div>
          <div class="w-[50%]">{{ systemInfo[3] || '-' }}</div>
        </div>
      </div>
      <!--
        <div class="page-dashboard-system-table-item">
          <div class="w-[41.8%]">{{ systemInfo[3] || '-' }}</div>
          <div class="w-[35.8%]">{{ systemInfo[4] || '-' }}</div>
          <div class="text-left">{{ systemInfo[5] || '-' }}</div>
        </div>
       -->
    </div>
  </div>
</template>

<script setup lang="ts">
import apis from '@/apis'
import { storage } from '@/utils/storage'
import { unitConversion, getConversionLimit } from '@/utils/unitConversion'
import { computed, onMounted, reactive, ref } from 'vue'
import useStore from '@/stores/index'
const { system } = useStore()
const {
  system: { get_img_domain, set_img_domain }
} = apis
interface IAdv {
  forbid: number
  start: number
  total: number
}
interface ICollect {
  collect_cron: number
  start_collect: number
}
interface ISite {
  forbid: number
  start: number
  total: number
}
interface IConf {
  configured: number
  not_configured: number
}
interface IDashboard {
  adv_info: IAdv
  collect_info: ICollect
  site_info: ISite
  system_conf: IConf
  system_info: string
}
const loading = ref(false)
const dashboardInfo = reactive<IDashboard>({
  adv_info: { forbid: 0, start: 0, total: 0 },
  collect_info: { collect_cron: 0, start_collect: 0 },
  site_info: { forbid: 0, start: 0, total: 0 },
  system_conf: { configured: 0, not_configured: 0 },
  system_info: ''
})

const {
  system: { get_more_action, get_image_set }
} = apis
const IMAGE_TYPE: Record<number, any> = {
  0: 'jpg&jpeg',
  1: 'png',
  2: 'bmp',
  3: 'webp',
  4: 'gif'
}
const getMoreActionInfo = () => {
  loading.value = true
  get_more_action()
    .then((res) => {
      loading.value = false
      console.log('res: ', res)
      Object.assign(dashboardInfo, res)
    })
    .catch(() => {
      loading.value = false
    })
}
//全局获取图片配置
const getImageSet = () => {
  get_image_set().then((res: any) => {
    console.log('res获取图片设置: ', res)
    res.img_type = res.img_type
      .map((item: number) => {
        return '.' + IMAGE_TYPE[item]
      })
      .join(' ')
    console.log('res.img_type: ', res.img_type)
    //图片类型数组
    storage.set('img_type', res.img_type || [])
    //图片上传大小：数字+单位
    storage.set('img_size', unitConversion(res.volume) || '')
    //图片上传大小：数字
    storage.set('img_size_limit', getConversionLimit(res.volume) || '')
  })
}
const systemInfo = computed(() => {
  return dashboardInfo.system_info.split(';')
})
console.log('systemInfo: ', systemInfo)
//获取图片域名
const getImgDomaineSet = () => {
  get_img_domain().then((res: any) => {
    console.log(res, '获取图片域名设置')
    storage.set('image_domain', res)
    system.setImageDomain(res)
  })
}
onMounted(() => {
  getMoreActionInfo()
  getImageSet()
  getImgDomaineSet()
})
</script>

<style lang="less" scoped>
.page-dashboard {
  height: auto;
  &-overview {
    &-item {
      width: 49%;
      height: 168px;
      border: 1px solid rgba(232, 232, 232, 1);
      border-radius: 3px;
      margin-bottom: 24px;
      &-top {
        display: flex;
        justify-content: space-between;
      }
      &-column {
        display: flex;
        justify-content: space-between;
        margin-top: 42px;
        .column-border:not(:last-child) {
          border-right: 1px solid #ebebeb;
        }
      }
    }
  }
  &-system {
    border: 1px solid #ebebeb;
    &-table {
      font-size: 14px;
      color: #262626;
      &-item {
        height: 48px;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        padding: 0 32px;
        box-sizing: border-box;
        div {
          // width: 33.3%;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
